<template>
  <div class="childrenTab">
    <i class="myfont changeHover icon-arrow-left" @click="tabPre" :style="{cursor:newTabList.totalPage>1?'pointer':'not-allowed'}"></i>
    <el-tabs v-model="nowTagValue"
             name="childrenTab"
             id="topTab"
             @contextmenu.native="handleContextmenu"
             :closable="false"
             @tab-click="openTag"
             @edit="menuTag">
      <!--   type="card"      -->
      <el-tab-pane :key="item.id"
                   v-for="item in newTabList.dataList"
                   :label="generateTitle(item)"
                   :data-url="item.path"
                   v-if="$store.state.tabs.currentSide=='/offen'?item.type=='common':item.isShow"
                   :name="item.path">
        <template class="tabClass" slot="label">
          <i :class="item.source"></i>
          <span>{{generateTitle(item)}}</span>
        </template>
      </el-tab-pane>
    </el-tabs>
    <i class="myfont changeHover icon-arrow-right" @click="tabNext" :style="{cursor:newTabList.totalPage>1?'pointer':'not-allowed'}"></i>
    <span class="tabNum">{{num}}</span>
    <span class="tabNumT">/ {{newTabList.totalPage}}</span>
    <i @click="$parent.editShow()" :class="['changeHover', 'el-icon-edit',{'activeColor':index.editBoxShow}]"></i>
    <div class="proBox">
      <p class="progress-tab" :style="{width:wid}"></p>
    </div>
    <p v-if="showFinger" class="gifP">
        <span class="activeColor">点击配置常用功能</span>
        <i class="myfont icon-iconfontzhizuobiaozhun47 activeColor"></i>
    </p>
  </div>
</template>
<script>
  import {mapGetters, mapState} from "vuex";
  import {isURL} from "@/util/validate";
  import {pageNation} from "../../../util/util";
  import config from "../sidebar/config.js";

  export default {
    data(){
      return{
        config: config,
        num:1,
        newTabList:{},
        pageSize:1,
        screenWidth:document.body.clientWidth,
        timer:true,
        showFinger:false,
      }
    },
    inject: ["index"],
    watch:{
      tabList(){
        let list = this.$store.state.tabs.currentSide=='/offen'?this.tabList.filter(item=>{return item.type=='common'}):this.tabList
        this.newTabList = pageNation(list,this.pageSize,this.num)
        this.showFinger=this.newTabList.dataList.length>0?false:true
        this.num = this.newTabList.page
        let len=0;
        this.menu.forEach(item=>{
          len += item.children.length
        })
        if(this.tabList.length != len||this.$store.state.tabs.currentSide=='/offen'){
          if(!(this.$store.state.tabs.currentSide=='/offen'&&this.newTabList.dataList.length==0)){
            if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
            if (this.validIsOpen(this.newTabList.dataList[0])) {
              window.open(this.newTabList.dataList[0][this.pathKey]);
            } else {
              // let cur= this.$store.state.tabs.currentSide
              // let query = {father:cur}
              this.$router.$avueRouter.group = this.newTabList.dataList[0].group;
              this.$router.$avueRouter.meta = this.newTabList.dataList[0].meta;
              console.log('topTab====',this.newTabList.dataList[0])
              this.$router.push({
                path: this.$router.$avueRouter.getPath({
                  name: this.newTabList.dataList[0].name,
                  src: this.newTabList.dataList[0].path
                }, this.newTabList.dataList[0].meta),
                query: this.newTabList.dataList[0].query
              });
            }
          }
        }
      }

    },
    computed: {
      ...mapGetters(["tagWel", "tagList", "tag", "website","screen","tabList","menu"]),
      ...mapState({
        showTag: state => state.common.showTag
      }),
      nowTagValue: function () {
        return this.$router.$avueRouter.getValue(this.$route);
      },
      wid: function () {
        return (this.num / this.newTabList.totalPage) * 100 +'%'
      },
      pathKey() {
        return website.menu.props.path || this.config.propsDefault.path;
      },
    },
    methods:{
      //tab翻页
      tabPre(){
        if(this.newTabList.totalPage!=1){
          let page = this.num==1?this.newTabList.totalPage:this.num-1
        //   let list = this.$store.state.tabs.currentSide=='/offen'?this.tabList.filter(item=>{return item.type=='common'}):this.tabList
          this.newTabList = pageNation(this.tabList,this.pageSize,page)
          this.num = this.newTabList.page
        }
      },
      tabNext(){
        if(this.newTabList.totalPage!=1) {
          let page = this.num == this.newTabList.totalPage ? 1 : this.num + 1
          let list = this.$store.state.tabs.currentSide=='/offen'?this.tabList.filter(item=>{return item.type=='common'}):this.tabList
          this.newTabList = pageNation(list, this.pageSize, page)
          this.num = this.newTabList.page
        }
      },
      //快速翻页
      numToPage(num){
        // console.log(num);
        let page = num;
        let list = this.$store.state.tabs.currentSide=='/offen'?this.tabList.filter(item=>{return item.type=='common'}):this.tabList
        this.newTabList = pageNation(list,this.pageSize,page)
        this.num = this.newTabList.page
      },
      generateTitle(item) {
        return this.$router.$avueRouter.generateTitle(
          item.name,
          (item.meta || {}).i18n
        );
      },
      validIsOpen(item) {
        if (item[this.isOpenKey] === 2 && isURL(item[this.pathKey])) {
          return true;
        }
      },
      handleContextmenu(event) {
        let target = event.target;
        // 解决 https://github.com/d2-projects/d2-admin/issues/54
        let flag = false;
        if (target.className.indexOf("el-tabs__item") > -1) flag = true;
        else if (target.parentNode.className.indexOf("el-tabs__item") > -1) {
          target = target.parentNode;
          flag = true;
        }
        if (flag) {
          event.preventDefault();
          event.stopPropagation();
          this.contentmenuX = event.clientX;
          this.contentmenuY = event.clientY;
          this.tagName = target.getAttribute("aria-controls").slice(5);
          this.contextmenuFlag = true;
        }
      },
      openTag(item) {
        if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
        if (this.validIsOpen(item)) {
          window.open(item[this.pathKey]);
        } else {
          // let cur= this.$store.state.tabs.currentSide
          // let query = {father:cur}
          this.$router.$avueRouter.group = item.group;
          this.$router.$avueRouter.meta = item.meta;
          this.$router.push({
            path: this.$router.$avueRouter.getPath({
              name: item.label,
              src: item.$attrs['data-url']
            }, item.meta),
            query:item.query
          });
        }
      },
      findTag(value) {
        let tag, key;
        this.tagList.map((item, index) => {
          if (item.value === value) {
            tag = item;
            key = index;
          }
        });
        return {tag: tag, key: key};
      },
      menuTag(value, action) {
        if (action === "remove") {
          let {tag, key} = this.findTag(value);
          this.$store.commit("DEL_TAG", tag);
          if (tag.value === this.tag.value) {
            tag = this.newTabList.dataList[key === 0 ? key : key - 1]; //如果关闭本标签让前推一个
            this.openTag(tag);
          }
        }
      },
      changeSize(){
        // if(!this.timer) return;
        // this.timer=false;
        // let th = this
        // setTimeout(()=>{
        //   th.screenWidth = window.screenWidth
        //   let width = Math.floor(document.getElementById('topTab').clientWidth / 120)
        //   th.pageSize = width
        //   let arr = th.tabList.map(i=>i.id)
        //   // let index = arr.indexOf(th.newTabList.dataList[0].id)==0?1:arr.indexOf(th.newTabList.dataList[0].id)
        //   // th.num = Math.ceil(index / width)
        //   let list = this.$store.state.tabs.currentSide=='/offen'?th.tabList.filter(item=>{return item.type=='common'}):th.tabList
        //   th.newTabList = pageNation(list,th.pageSize,th.num)
        //   th.timer = true;
        // },1000)
      },
    },
    mounted(){
      const that = this;
      let width = Math.floor(document.getElementById('topTab').clientWidth / 120)
      that.pageSize = width
      let list = this.$store.state.tabs.currentSide=='/offen'?that.tabList.filter(item=>{return item.type=='common'}):that.tabList
      that.newTabList = pageNation(list,that.pageSize,1)
      window.addEventListener('resize', e=> that.changeSize())
    }
  }
</script>
<style lang="scss">
  .childrenTab{
    display: flex;
    justify-content: space-around;
    background: #fff;
    align-items: center;
    height: 54px;
    position: relative;
    >.myfont,>i{
      font-size: 24px;
      cursor: pointer;
      color: #ccc;
    }
    .el-icon-edit{
      font-size: 20px;
    }
    .bgCircle{
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #1C7DF0;
      color: #fff;
      text-align: center;
      line-height: 24px;
    }
    .el-tabs{
      width: calc(100% - 200px);
    }
    .el-tabs__nav{
      display: flex;
      flex-direction: row;
      width: 100%;
    }
    .el-tabs__nav-scroll{
      overflow: auto;
      ::-webkit-scrollbar{
        display: none;
      }
      .el-tabs__nav-prev{

      }
      .el-tabs__nav-next{

      }
    }
    .el-tabs__header{
      margin-bottom: 0;
    }
    .el-tabs__item{
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 54px;
      padding: 7px 0px;
      margin: 0 5px;
      width: 120px;
      i,span{
        line-height: 20px;
      }
    }
    .el-tabs__active-bar{
      height: 0;
    }
    .el-tabs__nav-wrap::after{
      background: none;
    }
    .proBox{
      position: absolute;
      bottom: 0px;
      height: 2px;
      width: 100%;
      .progress-tab{
        height: 2px;
        margin: 0;
        background: #1c7df0;
        transition: width 0.2s linear;
      }
    }
    .gifP{
      right: 0px;
      position: absolute;
      top: 4px;
      margin: 0;
      width: 50%;
      .icon-iconfontzhizuobiaozhun47{
        right: 0;
        position: absolute;
        font-size: 50px;
        font-weight: 600;
        animation: click 2s infinite linear ;
      }
      span{
        display: inline-block;
        /*width: 10px;*/
        right: 100px;
        position: absolute;
      }
    }
    @keyframes click{
      0%   {right: 150px}
      50%  {right: 20px}
      100%  {right: 150px}
    }
    .tabNumT{
      font-size: 20px;
      color: #9dc2ef;
    }
    .tabNum{
      font-size: 26px;
      margin-right: -16px;
      color: #1C7DF0;
    }
  }
</style>
